<template>
  <van-sticky>
  <div class="header">
    <van-icon class="icon" color="#2B95EF" size="4vw" name="arrow-left" @click="toBack">
      <span style="color: #141414; margin-left: 8px;">{{ title }}</span>
    </van-icon>
    <div class="icon-shua">
<!--      传图标-->
      <slot name="icon">
      </slot>
    </div>
  </div>
  </van-sticky>

</template>

<script>
import {useRouter} from 'vue-router';

export default {
  props: ['title'],

  setup() {

    const router = useRouter();

    const toBack = (event) => {
      event.stopPropagation(); // 阻止事件冒泡
      router.back();
    }

    const reload = (event) => {
      event.stopPropagation(); // 阻止事件冒泡
      window.location.reload();
    }

    return {
      toBack,
      reload
    }

  }

}
</script>

<style lang="less" scoped>
.header {
  background-color: #fff;
  height: 90px;
  display: flex;
  font-size: 35px;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  color: #141414;

  .icon {
    position: absolute;
    left: 30px;
  }

  .icon-shua {
    position: absolute;
    right: 30px;
    color: #2B95EF;
  }
}
</style>
